<template>
    <div style="padding: 10px 15px">
        <el-upload
            class="avatar-uploader"
            :action="imgLoadPath"
            :show-file-list="false"
            :on-success="handleBeforeUpload1"
            :before-upload="beforeUpload"
        >
            <div class="zhenjian-id-box" style="border: 1px dashed #eee" v-loading="loading">
                <el-image style="width: 150px; height: 150px" :src="docLoadPath + imgModelUrl" fit="contain" v-if="imgModelUrl"></el-image>
                <div class="zhenjian-id-box zhenjian-flex" v-else>请上传图片</div>
            </div>
        </el-upload>
    </div>
</template>

<script>
import api from '@/api/index';
export default {
    name: 'IDReady',
    props: ['imgUrl'],
    data() {
        return {
            imgModelUrl: '',
            docLoadPath: api.IMG_PATH,
            imgLoadPath: api.API_PATH + api.LOGIN_IMG,
            uploadLogin: null,
            loading: false,
            maxSize:300
        };
    },
    watch: {
        imgUrl: function (val, oldVal) {
            if (val != oldVal) {
                this.imgModelUrl = val;
            }
        },
        sise: function (val, oldVal) {
            if (val != oldVal) {
                this.maxSize = val;
            }
        }
    },
    created() {
        if (this.imgUrl) {
            this.imgModelUrl = this.imgUrl;
        }
        if (this.sise) {
            this.maxSize = this.sise;
        }
    },
    methods: {
        //身份证正面上传成功
        handleBeforeUpload1(response) {
            this.loading = false;
            if (response.code == 1) {
                this.$emit('update:imgUrl', response.data);
                this.$message.success('上传成功');
            } else {
                this.$message.error(response.msg);
            }
        },
        beforeUpload: function (file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传jpg,jpeg,png,gif,bmp格式文件！'
                });
                return false;
            }
            const fileSize = this.fileSize(file.size, 'kb');
            if (fileSize.code == 0) {
                this.$message({
                    type: 'warning',
                    message: fileSize.msg
                });
                return false;
            }
            this.loading = true;
        },
        fileSize(fileSize, unit) {
            let total = 0;
            if (unit == 'm') {
                total = fileSize / 1024 / 1024;
            } else if (unit == 'kb') {
                total = fileSize / 1024;
            }
            if (total > this.maxSize) {
                return { code: 0, msg: '文件大小请控制在' + this.maxSize + unit + '以内!' };
            }
            return { code: 1 };
        },
        handleError() {
            this.loading = false;
            this.$message.error('上传失败');
        }
    }
};
</script>

<style scoped>
.zhenjian-id-box {
    width: 150px;
    height: 150px;
    font-size: 14px;
    color: #888;
    text-align: center;
    line-height: 150px;
    border-radius: 4px;
}
</style>
